<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch模拟数据请求</title>
    <style type="text/css">
        li{
            list-style: none;
            margin-bottom: 15px;
        }
        div{
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<button>定时器</button>
<button>定时器</button>
<button>定时器</button>
<div id="app">
   <div style="width: 500px;margin: 50px auto">
       <div>
           姓名：<select v-model="formData.person">
           <option value="">请选择姓名</option>
           <option value="zry">张儒阳</option>
           <option value="zws">郑维山</option>
       </select>
       </div>
       <li>籍贯：<input type="text" v-model="formData.jiguan"></li>
       <li>年龄：<input type="text" v-model="formData.age"></li>
       <li>岗位：<input type="text" v-model="formData.post"></li>
   </div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                formData:{
                    person:'',
                    jiguan:'',
                    age:'',
                    post:''
                },
            }
        },
        watch:{
            'formData.person':function (val) {
                console.log(val);
                if (val == 'zry'){
                    //当选择张儒阳，然后通过val取后台请求他的相关数据
                    //setTimeout 它是会执行一次，它有2个参数，第一个参数是回调数，第二个参数是请求的时间
                    //window. setTimeout(function () {}
                    //箭头函数是没有this的，它的this是上下文
                    //setTimeout 异步，宏任务
                    setTimeout(()=>{
                        // console.log(1)
                        var res = {jiguan:'河北',age:'26',post:'高级前端开发工程师'};
                        // console.log(this)
                            this.formData.jiguan = res.jiguan;
                            this.formData.age = res.age;
                            this.formData.post = res.post;

                    },3000);
                }else if (val == 'zws'){
                    //当选择郑维山，然后通过val取后台请求他的相关数据
                    setTimeout(()=>{
                        // console.log(1)
                        var res = {jiguan:'广西',age:'21',post:'高级前端开发工程师'};
                        // console.log(this)
                        this.formData.jiguan = res.jiguan;
                        this.formData.age = res.age;
                        this.formData.post = res.post;

                    },3000);

                }
            }
        }
    })

    /*
    * 当i 使用 var来定义的时候，alert（i）的值是3
    * 当i 使用let 来定义的时候，alert（i）的值分别是0,1,2
    * val的值在每次循环的过程中都会被替换或重置，而let则不会
    * */
    let btn = document.getElementsByTagName("button");
    for (let i = 0;i<btn.length;i++){
        btn[i].onclick = function () {
            alert(i)
        }
    }


</script>
</body>
</html>